<template>
  <div class="nav-bar-index cf weui-flex ta-c">
    <div class="nav-bar-item weui-flex__item bd-r" :class="{'_c': current == 0}" @tap="current = 0">
      <span><a>已布置</a></span>
    </div>
    <div class="nav-bar-item weui-flex__item" :class="{'_c': current == 1}" @tap="current = 1">
      <span><a>未布置</a></span>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    value: [Number]
  },
  data() {
    return {
      current: this.value
    }
  },
  watch: {
    value (nv) {
      this.current = nv
    },
    current (nv) {
      this.$emit('change', nv)
    }
  }
}
</script>

<style scoped lang="less">
@import '../../assets/less/var.less';
.nav-bar-index{
  height: 94rpx;
  border-bottom: 1px solid #eee;
}

.nav-bar {
  &-item {
    float: left;
    padding: 10px;
    background-color: #F8F8F8;
  }
}
span, a {
  display: inline-block;
  color: #333;
}

._c {
  background-color: white;
  position: relative;
  font-size: 16px;
  // &::after {
  //   content: "";
  //   display: block;
  //   height: 2px;
  //   background-color: white;
  //   position: absolute;
  //   width: 100%;
  //   bottom: -1px;
  //   z-index: 10;
  //   left: 0;
  // }
  span, a {
    color: @colorTeal;
    font-weight: bold;
  }
  // a {
  //   border-bottom: 5px solid @colorTeal;
  // }
}
</style>
